<template>
  <page-frame>
    <div class="chang-bed">
      <div class="toptitle">
        <div class="left">会员换床-申请换床</div>
        <div class="right">
          <div class="btns">
            <el-button @click="submit" class="lightGreenBtn">提交申请</el-button>
            <el-button @click="back">返回</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="step-show" @click="showStep">
        <img src="../../img/show.png" class="step-show-img" v-show="isShowStep">
        <img src="../../img/hidden.png" class="step-show-img" v-show="!isShowStep">
        {{show}}
      </div>
      <div class="steptar" v-show="isShowStep">
        <stepChange :stepData="stepData"></stepChange>
      </div>
      <div class="changeBed01">
        <div class="retrearInput">
          <el-form :model="form" ref="get_data" label-width="100px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="会员姓名">
                  <el-autocomplete v-model="memberName" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="会员编号">
                  <el-input v-model="memberInfor.memberNo" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="原床位" >
                  <el-input v-model="memberInfor.bedNo" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="新床位" >
                  <el-cascader
                    expand-trigger="hover"
                    :options="bedList"
                    v-model="form.bedInfor"
                    @change="handleChange"
                    placeholder="请选择所属房间"
                  >
                  </el-cascader>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="申请换床日期" >
                  <el-date-picker
                    type="date"
                    v-model="form.dateApplication"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="原因">
                  <el-input :rows="3" type="textarea" v-model="form.remark" placeholder="请输入换床原因" style="width:91%!important;"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script>
  import stepChange from '../../components/stepbar/change.vue';
  import commonJs from '../../config/common.js';
  import bedChangeApi from '../../service/member/bedChangeApi';
  import commonApi from '../../service/member/commonApi';
  import teamApi from '../../service/corporation/teamApi';
  export default {
    methods: {
      init(){
        this.getAllMember();
        this.getBedList();
      },
      /**
       * 筛选会员
       */
      querySearchAsync(queryString, cb) {
        var members = this.members;
        var results = queryString ? members.filter(this.createStateFilter(queryString)) : members;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 1000);
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.memberName.indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        this.memberInfor = item;
        this.form.memberId = item.memberId;
      },
      /**
       * 获得所有会员
       */
      getAllMember(){
        let self = this;
        commonApi.getAllCheckInMemberInfor().then(function (response) {
          self.members = response.body.data;
          for(var i=0;i<self.members.length;i++){
            var  member = self.members[i];
            member.value = member.memberName;
          };
        })
      },
      /**
       * 获取房间级联选择器下拉菜单
       */
      getBedList(){
        let self = this;
        teamApi.getStructureBedroomTreeWithBeds().then(function (response) {
          console.debug(response.body.data);
          self.bedList =response.body.data;
          console.debug(self.bedList);
          commonJs.changeBedList(self.bedList);
        })
      },
      //显示或者隐藏流程图
      showStep(){
        this.isShowStep =  !this.isShowStep;
        (this.isShowStep == false) ? (this.show = "显示流程图"):(this.show = "隐藏流程图");
      },

      back(){
        this.$confirm('是否返回上级页面，点击「确认」后将不保存当页内容', '返回', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
          type: 'success',
          message: '返回成功!'
        });
        this.$router.push({name:"bedChanges"});
      }).catch(() => {
          this.$message({
          type: 'info',
          message: '已取消返回'
        });
      });
      },
      /**
       * 提交申请换床
       */
      submit(){
        let self = this;
        if(self.form.bedInfor.length<4){
          self.$message({
            type: 'error',
            message: '请选择正确的新床位!'
          });
          return false;

        }

        self.form.bedId = self.form.bedInfor[self.form.bedInfor.length-1];
        self.$confirm('确认提交会员 '+self.memberName+" 的换床申请", '换床申请', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          bedChangeApi.bedChangingFor(self.form).then(function () {
            self.$message({
              type: 'success',
              message: '提交申请成功!'
            });
            self.$router.push({name:"bedChanges"});
          },function(res){
            self.$message({
              type: 'error',
              message: res.data.message
            });
        })
      }).catch(() => {
          self.$message({
          type: 'info',
          message: '已取消申请'
        });
      });
      },
      handleChange(value) {
        console.log(value);
      },
    },
    mounted: function () {
      this.init();
    },
    components: {
      stepChange
    },
    data() {
      return {
        stepData:1,
        memberName:"",
        form:{
          "bedId":0,
          "bedInfor":[],
          "dateApplication": new Date(),
          "memberId": 0,
          "remark": ""
        },
        members:[],
        memberInfor:{},
        bedList:[],
        isShowStep:false,
        show:"显示流程图",
      }
    },

  }
</script>
<style>
  .changeBed01 .retrearInput{
    width: 70%;
    margin: 50px auto;
    padding-left: 30px;
  }
  .chang-bed  .el-autocomplete,.chang-bed .el-cascader{
    width: 100%;
  }
</style>
